{{ define "main" }}

<main id="main">

<div class="layui-fluid list-show" >
    <div class="layui-row"> 
        <div class="layui-col-md7 layui-col-sm6 layui-col-xs12">
            <div class="list-show-title">
                <h1>This is my zone</h1>
            </div>
        </div>
        <div class="layui-col-md5 layui-col-sm6 layui-col-xs12" style="text-align:center;">
            <img src="/self/img/undraw_online_media_62jb.png"  class="list-title-pic">
        </div>
    </div>
</div>

<div class="layui-container">
    <div class="layui-card single-card">
        <div class="layui-card-header"><h1> Zone </h1></div>

        <ul class="layui-timeline" style="margin-top:10px; margin-bottom:10px">
            <!-- Page Prev -->
            {{ if .Paginator.HasPrev }}
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe617;</i>
                    <div class="layui-timeline-content layui-text">
                        <a href="{{ .Paginator.Prev.URL }}">
                            <h3 class="layui-timeline-title">Prev</h3>
                        </a>
                    </div>
                </li>
            {{end}}

            {{ range (.Paginator 1).Pages.ByDate.Reverse }}
            <li class="layui-timeline-item">
              <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
              <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">{{.Date.Format "2006-01-02 15:04"}}</h3>
                <div class="layui-card-body markdown-body">
                    {{ .Content }}
                </div>
              </div>
            </li>
            {{ end }}

            <!-- Page Next -->
            {{ if .Paginator.HasNext }}
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe617;</i>
                    <div class="layui-timeline-content layui-text">
                        <a href="{{ .Paginator.Next.URL }}">
                            <h3 class="layui-timeline-title">More</h3>
                        </a>
                    </div>
                </li>
            {{end}}
            
        <ul>
    </div>

    <!--{{partial "pager" .}}-->
</div>


</main>

{{end}}